<template>
  <div class="hp_blog-addBlog">
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="blog标题">
        <el-input v-model="form.title"></el-input>
      </el-form-item>
      <el-form-item label="简介">
        <el-input  type="textarea"  :rows="4" maxlength="240" minlength="20" v-model="form.intro"></el-input>
      </el-form-item>
      <el-form-item label="blog详情">
        <div id="blogDetail"></div>
      </el-form-item>
      <el-form-item>
        <el-button @click="blogSave" type="primary" size="mini">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import Wangeditor from 'wangeditor'
import {
  blogSave,
  blogDetail
} from '@/api/blog'

export default {
  name: 'addBlog',
  data () {
    return {
      form: {
        title: null,
        intro: null
      },
      editorInstance: null
    }
  },
  methods: {
    async blogSave () {
      if (!this.form.title) return this.$message.warning('请输入blog标题')
      if (!this.form.intro) return this.$message.warning('请输入简介')
      if (!this.editorInstance.txt.html()) this.$message.warning('请输入blog内容')
      await blogSave({
        id: this.$route.query.id,
        title: this.form.title,
        intro: this.form.intro,
        detail: this.editorInstance.txt.html()
      })
      this.$message.success('保存成功')
      this.$router.push({
        path: '/main/blogList'
      })
    },
    async blogDetail () {
      let res = await blogDetail({
        id: this.$route.query.id
      })
      this.form.title = res.title
      this.form.intro = res.intro
      this.editorInstance.txt.html(res.detail)
    }
  },
  mounted () {
    this.editorInstance = new Wangeditor('#blogDetail')
    this.editorInstance.customConfig.uploadImgShowBase64 = true
    this.editorInstance.customConfig.menus = [
      'head',  // 标题
      'bold',  // 粗体
      'fontSize',  // 字号
      'fontName',  // 字体
      'italic',  // 斜体
      'underline',  // 下划线
      'strikeThrough',  // 删除线
      'foreColor',  // 文字颜色
      'backColor',  // 背景颜色
      'link',  // 插入链接
      'list',  // 列表
      'justify',  // 对齐方式
      'quote',  // 引用
      'emoticon',  // 表情
      'image',  // 插入图片
      'table',  // 表格
      'code',  // 插入代码
      'undo',  // 撤销
      'redo'  // 重复
    ]
    this.editorInstance.create()
    if (this.$route.query.id) {
      this.blogDetail()
    }
  }
}
</script>

<style scoped lang="stylus">
.hp_blog-addBlog {
  width 100%
}
::v-deep .w-e-text-container{
  height 600px !important
}
</style>
